<template>
  <div>
    <!-- 
      需求：小选框都选中，全选框自动选中
      1、布局
      2、动态渲染列表（双向绑定复选框）
      3、定义计算属性，用来绑定全选框，计算属性的值根据小选框的状态返回true或false

      需求：点击反选按钮，让所有小选框，各自取相反勾选状态
        1、给按钮绑定点击事件，并声明事件处理函数
        2、在事件处理函数中，循环数组，将数组中c取反即可
     -->
    <span>全选:</span>
    <input v-model="checkedAll" type="checkbox" />
    <button @click="changeStateFn">反选</button>
    <ul>
      <li v-for="(item, index) in arr" :key="index">
        <input v-model="item.c" type="checkbox" />
        <span>{{ item.name }}</span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: [
        {
          name: "猪八戒",
          c: false,
        },
        {
          name: "孙悟空",
          c: false,
        },
        {
          name: "唐僧",
          c: false,
        },
        {
          name: "白龙马",
          c: false,
        },
      ],
    };
  },
  computed: {
    // checkedAll() {
    //   // 统计小选框是否全部选中，如果是则返回true，否则返回false
    //   // every() // 当every方法中的条件语句都成立的时候则返回true，只有一个条件不符合则返回false
    //   /**
    //    * every语法：
    //    * arr.every((item)=>{
    //    *  // item指的就是数组的中的元素
    //    *  // 这里可以做条件判断，数组中的所有元素都符合条件则返回true，否则返回false
    //    *    return 条件
    //    * })
    //    *
    //    * */
    //   return this.arr.every((item) => {
    //     return item.c === true;
    //   });
    // },
    checkedAll: {
      set(bool) {
        console.log(bool);
        // bool获取到的是用户设置全选框的状态值：true或者false
        // 将状态值同步给小选框数据中的c属性即可
        this.arr.forEach((item) => {
          item.c = bool;
        });
      },
      get() {
        // this.arr就是checkedAll计算属性的依赖项，依赖项发生改变计算属性会自动再次执行。
        return this.arr.every((item) => {
          return item.c === true;
        });
      },
    },
  },
  methods: {
    // 状态取反
    changeStateFn() {
      this.arr.forEach((item) => {
        item.c = !item.c;
      });
    },
  },
};
</script>

<style>
</style>